<template>
	<view class="service" v-show="service">
		<view class="mask" @click="colse"></view>
		<view class="box" @longtap="longtap">
			<image @click.stop="colse" class="colse" src="/static/images/colse.png" mode=""></image>
			<view class="title">扫码添加客服后对接品牌企业家</view>
			<view class="subTitle">请备注“姓名-公司-职位”</view>
			<!-- <view class="qrCode"></view> -->
			<divimg class="qrCode" :src="data.platform_kefu"></divimg>
			<view class="desc">长按保存二维码</view>
		</view>
	</view>
</template>

<script>
	import {  downloadBase64 } from '@/utils/canvas.js';
	export default {
		name: 'service',
		data() {
			return {
				service: false,
				data: {},
			};
		},
		created() {},
		methods: {
			colse() {
				this.service = false;
			},
			open() {
				this.service = true;
				this.init();
			},
			async init() {
				const { data } = await this.$api.chatConfig();
				this.data = data;
			},
			longtap() {
				downloadBase64(this.data.platform_kefu,'客服.png')
			},
		},
	};
</script>

<style lang="scss" scoped>
	.service {
		position: fixed;
		z-index: 9999;
		background: linear-gradient(to bottom, #effdf8, #e3fbde);
		width: 100%;
		min-height: 600rpx;
		border-radius: 20rpx 20rpx 0 0;
		bottom: 0;
		left: 0;
		text-align: center;
		.mask {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.box {
			overflow: hidden;
			position: relative;
			z-index: 2;
			.colse {
				position: absolute;
				right: 35rpx;
				top: 46rpx;
				width: 28rpx;
				height: 28rpx;
			}
			.title {
				margin: 45rpx auto 30rpx;

				font-weight: bold;
				color: #000000;
				font-size: $uni-font-size-15;
			}
			.subTitle {
				color: #999999;
				font-size: $uni-font-size-12;
				margin: 30rpx auto 25rpx;
			}
			.qrCode {
				width: 350rpx;
				height: 350rpx;
				border-radius: 10rpx;
				margin: 25rpx auto 20rpx;
			}
			.desc {
				color: #999999;
				font-size: $uni-font-size-12;
				margin: 20rpx auto calc(env(safe-area-inset-bottom) + 50rpx);
			}
		}
	}
</style>
